<template>
  <div class="zmvideo">
    <div class="video" id="my-video">
      <video id="playVideo" autoplay="false" x5-video-player-type="h5" x5-video-player-fullscreen="true"  x5-video-orientation="landscape|portrait"  x-webkit-airplay="true" playsinline webkit-playsinline="true" ref="video" width="100%" height="100%" preload="none" :src="videoArrEachSrc"  controls=""></video>
    </div>
    <div class="video-descri" v-html='descri'></div>
    <div style="height:75px;width:100%"></div>
  </div>
</template>

<script>
  import api from '../../api'
  export default {
    data () {
      return {
        videoArr : [],
        videoArrEach: '',
        videoArrEachSrc: '',
        descri: '',
        curr: 0,
        videoLen: ''
      }
    },
    props: {
      cid: '',
      lessonId: ''
    },
    mounted() {
        this.lessonDescri () // 网页浏览器用https接口      
    },
    created () {
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.hengshuping, false);
    },
    methods: {
      hengshuping () {
          if (window.orientation == 180 || window.orientation == 0) {
              // alert("竖屏状态！")
              document.getElementById('my-video').style.height = "35%"
          }
          if (window.orientation == 90 || window.orientation == -90) {
              // alert("横屏状态！")
              document.getElementById('my-video').style.height = "100%"
              document.getElementById('playVideo').style.height = "100%"
          }
      },
      lessonDescri () {
        const params = {
            commodityId : parseInt(this.cid),
            lesssonId : parseInt(this.lessonId)
        }
        api.getLessonDetail(params).then((res)=> {
            if(res.data.code == 0){
              //this.videoLen = res.data.data.vods.length
              this.descri = res.data.data.details
              //this.videoArr = res.data.data.vods
              this.videoArrEachSrc = res.data.data.videoUrl
              setTimeout(() => {
                var video = document.getElementById('playVideo')
                video.load();
                video.play();
                /*video.addEventListener('ended', () =>{
                  // alert('1')
                  this.curr++;
                  if (this.curr == this.videoLen){
                    this.curr = 0; // 播放完了，重新播放
                  }
                  this.videoArrEachSrc = this.videoArr[this.curr]
                  setTimeout(() => {
                    var video = document.getElementById('playVideo')
                    video.load();
                    video.play();
                  },10)
                })*/
              }, 20)
            } 
        }).catch(err=> {
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../styles/mixin.scss";
  .zmvideo {
    width: 100%;
    height: 100%;
  }
  .video {
    background: rgba(0,0,0, 1);
    margin: auto;
    z-index: 101;
    width: 100%;
    height: 35%;
    vertical-align: middle;
    .poster {
        display: none;
        height: 100%;
        width: 100%;
    }
  }
  .video-descri {
    margin: px2rem(20) px2rem(20) px2rem(0);
    overflow-y: scroll;
    min-height:px2rem(40);
    -webkit-overflow-scrolling: touch;
     img {
        width: 100%;
      }
      iframe {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        padding: px2rem(0);
      }
  }
 
</style>
